import React, { Component } from 'react';
import { Table, Pagination, Message, Dialog, Button, Balloon } from '@alifd/next';
import IceContainer from '@icedesign/container';
import TableFilter from './TableFilter';
import { responseFormatter } from '#/utils/coreApiDefine'
import { ApiOfRegistryAppsList } from '#/utils/registryApiDefine'
import SearchTableWrapper from '#/hoc/SearchTableWrapper'


@SearchTableWrapper(ApiOfRegistryAppsList, { responseFormatter })
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor() {
    super();
    this.state = {
      loading: false,
    };
  }

  renderInstanceInfo = (value, index, item) => {
    let that = this
    return (
      <div>
        {item.instanceInfos.map(function (instanceInfo, index1) {
          return (
            <dl style={styles.horizontal.dl} key={index1}>
              <dt style={styles.horizontal.dt}>{instanceInfo.status}</dt>
              {instanceInfo.instances.map(function (instance, index2) {
                return (
                  <dd style={styles.horizontal.dd} key={index2}>
                    <a target="_blank" href={instance.url} style={{'display': 'inline-block', 'width': '180px'}}>{instance.id}</a>
                    <a target="_blank" href={instance.url + 'actuator/env'} style={{'marginLeft': '20px'}}>查看运行环境</a>
                  </dd>)
              })}
            </dl>
          );
        })}
      </div>
    );
  }

  render() {
    const { instances } = this.props.bindingData;
    return (
      <IceContainer style={styles.container}>
        <TableFilter filter={this.props.filter} />
        <Table
          dataSource={instances.list}
          loading={this.state.loading}
          hasBorder={false}
          style={{ padding: '20px' }}
        >
          <Table.Column title="服务名称" dataIndex="name" />
          <Table.Column title="服务节点数" dataIndex="zoneCounts" />
          <Table.Column
            title="节点详细"
            cell={this.renderInstanceInfo}
          />
        </Table>
      </IceContainer>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0 0 20px',
  },
  title: {
    margin: '0',
    padding: '15px 20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
  },
  separator: {
    margin: '0 3px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    textAlign: 'right',
    marginRight: '20px',
  },
  editIcon: {
    color: '#2874D1',
    cursor: 'pointer',
  },
  horizontal: {
    dl: {
      margin: '0',
    },
    dt: {
      float: 'left',
      width: '20px',
      overflow: 'hidden',
      clear: 'left',
      textAlign: 'left',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    },
    dd: {
      marginLeft: '30px',
    }
  },
  dynamic: {
    color: '#80b347',
    fontSize: '14px',
  }
};
